<template>
  <div class="music" @click="isPlay = !isPlay">
    <transition name="fade">
      <span :class="['iconfont', 'icon-music-play']" key="play" v-if="isPlay"></span>
      <span :class="['iconfont', 'icon-music-pause']" key="pause" v-else></span>
    </transition>
    <audio ref="music" src="static/media/audio.mp3" loop></audio>
  </div>
</template>

<script>
  export default {
    name: 'music',
    data: function () {
      return {
        isPlay: false
      }
    },
    methods: {
      togglePlay: function () {
        this.isPlay = !this.isPlay;
      }
    },
    mounted: function () {
//      this.$set(this, 'isPlay', true);
    },
    watch: {
      isPlay: function (value) {
        value
          ? this.$refs.music.play()
          : this.$refs.music.pause();
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/scss/config";

  .music {
    position: absolute;
    right: setRem(36px);
    top: setRem(24px);
    z-index: 1;
    width: setRem(40px);
    height: setRem(40px);
    line-height: setRem(40px);
    text-align: center;
    border-radius: 50%;
    background-color: #e7c598;
    color: #bf0c21;

    span {
      font-size: setRem(40px);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      &::before {
        display: block;
        transform: translateY(0.06em);
      }
    }

    .icon-music-play {
      animation: playing 6s linear infinite;
    }
  }

  @keyframes playing {
    to {
      transform: rotate(360deg);
    }
  }
</style>
